<template>
  <div
    class="collapse-box"
    :style="
      `height: ${height};right: ${right}px;bottom: ${bottom}px;width: ${width}px;`
    "
  >
    <div class="title">
      <span :title="title">{{ title }}</span>
      <i class="svg-icon el-icon-close" @click="changeBox"></i>
      
      <!-- <svg-icon
        class="svg-icon"
        :iconClass="flag ? 'down' : 'up'"
        @click="changeBox"
      /> -->
    </div>
    <div class="main-context">
      <slot v-if="show" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Collapse',
  props: {
    startH: {
      type: Number,
      required: true
    },
    width: {
      type: Number,
      required: true
    },
    endH: {
      type: Number,
      default: 30
    },
    bottom: {
      type: Number,
      required: true
    },
    right: {
      type: Number,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    repaint: {
      type: Boolean,
      default: false
    },
    index:{
      type: Number
    }
  },
  data: () => ({
    flag: true,
    show: true
    // height: 0
  }),
  computed: {
    height() {
      return `${this.flag ? this.startH : this.endH}px`
    },
    ...mapGetters(['clickId'])
  },
  watch: {
    clickId(val) {
      // this.flag = true
    },
    // 解决显示隐藏不重绘的问题
    flag(val) {
      if (this.repaint) {
        if (val) {
          this.show = false
          setTimeout(() => {
            this.show = true
          }, 800)
        }
      }
    }
  },
  methods: {
    changeBox() {
      this.$emit('clickMe',this.index,false)
      // this.flag = !this.flag
      // this.$emit('clickMe', {
      //   target: this.title || '',
      //   value: this.flag
      // })
    }
  }
}
</script>
